import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';


const cardStyle = {
  width: "40em",
  marginTop: "10px",
  marginBottom: "10px"
}

function PictureUrl(props: any) {
  return (
    <div>
      <Card style={cardStyle}>
        <CardActionArea href={props.url} target={"_blank"}>
          <CardMedia
            component="img"
            height="240"
            image={props.url + "?size=small"}
          />
        </CardActionArea>
        <CardContent style={{textAlign: "left"}}>
          <div>原图</div>
          <div style={{color: "#24292E", backgroundColor: "#1B1F230D", borderRadius: "6px", padding: ".2em .4em", fontSize: "85%"}}>{props.url}</div>
        </CardContent>
      </Card>
    </div>
  );
}

export default PictureUrl;